<template>
  <div class="dock">
    <div class="dock-mask"></div>
    <div class="dock-container">
      <div class="dock-item-wrap">
        <a @click="dockClick()">
          <span>trash</span>
          <img class="dock-item" src="../assets/images/1.png" alt="trash" />
        </a>
      </div>
      <div class="dock-item-wrap">
        <a @click="dockClick()">
          <span>trash</span>
          <img class="dock-item" src="../assets/images/2.png" alt="trash" />
        </a>
      </div>
      <a class="dock-item-split">
        <img src="../assets/images/split.jpg" alt="split" />
      </a>
      <div class="dock-item-wrap">
        <a @click="dockClick()">
          <span>trash</span>
          <img class="dock-item" src="../assets/images/8.png" alt="trash" />
        </a>
      </div>
      <div class="dock-item-wrap">
        <a @click="dockClick()">
          <span>trash</span>
          <img class="dock-item" src="../assets/images/9.png" alt="trash" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
const { BrowserWindow } = require('electron').remote;

export default {
  name: "Dock",
  methods: {
    dockClick: function () {
      const childWindow = new BrowserWindow({ width: 800, height: 600, titleBarStyle:"hidden" });
      childWindow.loadURL('/about');
    },
  },
};
</script>

<style scoped>
.dock {
  width: 100%;
  height: 75px;
  z-index: 120;
  position: absolute;
  bottom: 0;
}

.dock .dock-mask {
  background-color: rgba(15, 15, 0, 0.45);
  width: 520px;
  height: 75px;
  border-radius: 5px;
  margin: 0 auto;
}

.dock .dock-container {
  position: absolute;
  bottom: 5px;
  text-align: center;
  width: 100%;
  z-index: 120;
}

.dock .dock-container .dock-item-wrap {
  display: inline-block;
}

.dock .dock-container .dock-item-wrap span {
  display: none;
  padding: 2px 0;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  top: -25px;
  width: 105px;
  color: #fff;
}

.dock .dock-container .dock-item-dot {
  position: absolute;
  bottom: -5px;
  color: #b9b9b9;
  width: 10px;
  height: 10px;
}

.dock .dock-container .dock-item-split {
  margin: 0 5px;
}

.dock .dock-container .dock-item-split img {
  width: 1px;
  height: 60px;
}

.dock .dock-container img {
  max-width: 130px;
}

.dock .dock-container img:hover {
  cursor: pointer;
}

.dock .dock-container a:hover span {
  display: unset;
}
</style>